<!-- 搜索详情 -->
<template>
	<view class="container">
		<!-- <uni-nav-bar  left-icon="back" @clickLeft="backClick" fixed="true" status-bar="true" title="搜索详情">
		</uni-nav-bar> -->
		<view class="header">
			<view class="uni-searchbox">
				<view class="uni-search-input">
					<icon type="search" :size='13' color='#333'></icon>
					<input confirm-type="search" placeholder="请输入搜索" placeholder-class="uni-input-plholder" class="uni-input" v-model="key"
					 @confirm="submitInput" />
				</view>
				<text class="areaAddress clamp">{{areaAddress}}</text>
			</view>
			<view class="conditions">
				<!--筛选 条件 -->
				<HMfilterDropdown :filterData="filterData" :defaultSelected="defaultSelected" @confirm="confirm"></HMfilterDropdown>
			</view>
		</view>
		<!-- 筛选结果 -->
		<view class="search__results">
			<seller-block :storeList="searchResult" :scrollTop="scrollTop"></seller-block>
		</view>
		<uni-load-more class="loadMore" iconType="circle" :status="loadStatus" :contentText="contentText"></uni-load-more>
	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	import HMfilterDropdown from '@/components/HM-filterDropdown/HM-filterDropdown.vue';
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	import sellerBlock from "@/components/sellerBlock/sellerBlock";

	import {
		merchantList,
		sellerFilterconfig
	} from "@/api/merchant.js"
	export default {
		components: {
			HMfilterDropdown,
			uniLoadMore,
			sellerBlock
		},
		data() {
			return {
				nodata: false,
				searchResult: [],
				//--------暂时获取商户数据参数
				key: '', //搜索关键字
				areaAddress: '', //地区
				recommend_key: '', //推荐value
				distance: "", //距离
				area_id: "", //区域value
				cate_id: "", //大分类value
				sub_cate_id: "", //小分类value
				quality: "", //智能排序
				data: {
					longitude: uni.getStorageSync("longitude"),
					latitude: uni.getStorageSync("latitude")
				},
				//--------翻页参数
				page: 1,
				limit: 10,
				loadStatus: "loading",
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多了"
				},
				filterData: [{
						"name": '推荐',
						"type": 'hierarchy',
						"submenu": [{
							"name": "推荐",
							"value": ""
						}]
					},
					{
						"name": '附近',
						"type": 'hierarchy',
						"submenu": [{
							"name": "附近",
							"value": "",
							"submenu": [{
								"name": "附近",
								"value": ""
							}, {
								"name": "500米",
								"value": "500"
							}, {
								"name": "1000米",
								"value": "1000"
							}, {
								"name": "2000米",
								"value": "2000"
							}, {
								"name": "3000米",
								"value": "3000"
							}, {
								"name": "5000米",
								"value": "5000"
							}]
						}]
					},
					{
						name: '全部分类',
						"type": 'hierarchy',
						"submenu": [{
							"name": "全部分类",
							"value": "",
							"submenu": [{
								"name": "全部分类",
								"value": ""
							}]
						}]
					},
					{
						name: '智能排序',
						"type": 'hierarchy',
						"submenu": [{
							"name": "智能排序",
							"value": ""
						}]
					}
				], //传入数据
				defaultSelected: [],
				scrollTop: 0
			}
		},
		onLoad(options) {
			this.areaAddress = uni.getStorageSync("Areaaddress")
			if (options.key) {
				this.key = options.key
			} else if (options.id) {
				this.cate_id = options.id
			}
			sellerFilterconfig({
				city_text: this.areaAddress
			}).then(res => {
				this.filterData[0].submenu.push.apply(this.filterData[0].submenu, res.data.offline_config.recommend_list)
				this.filterData[1].submenu.push.apply(this.filterData[1].submenu, res.data.offline_config.area_list)
				let area_list = res.data.offline_config.class_list.map((val, key) => {
					let obj = {
						name: val.name,
						submenu: val.sub_class_list,
						value: val.value
					}
					return obj
				})
				this.filterData[2].submenu.push.apply(this.filterData[2].submenu, area_list)
				this.filterData[3].submenu.push.apply(this.filterData[3].submenu, res.data.offline_config.quality_list.default)
				this.filterData[3].submenu.push.apply(this.filterData[3].submenu, res.data.offline_config.quality_list.quality)
				//初始选中
				this.defaultSelected = [
					[0],
					[0, 0],
					[0, 0],
					[0]
				];
			})
			this.merchantList()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		onReachBottom() {
			if (this.loadStatus == 'noMore') return;
			this.loadStatus = "loading";
			this.merchantList();
		},
		methods: {
			backClick() {
				if (this.data.id) { //offline 
					let pages = getCurrentPages();
					let prePage = pages[pages.length - 2];
					prePage.fromSDetail = true;
				}
				uni.navigateBack()
			},
			submitInput() {
				this.page = 1;
				this.searchResult = [];
				this.merchantList();
			},
			confirm(e) {
				console.log(e)
				this.recommend_key = e.value[0][0], //推荐value
					this.distance = e.value[1][1], //距离value
					this.area_id = e.value[1][0], //区域value
					this.cate_id = e.value[2][0], //大分类value
					this.sub_cate_id = e.value[2][1], //小分类value
					this.quality = e.value[3][0], //智能排序value
					this.loadStatus = "loading"
				this.page = 1;
				this.searchResult = [];
				this.merchantList();
			},
			merchantList() {
				merchantList({
					region: this.areaAddress,
					keywords: this.key,
					recommend_key: this.recommend_key,
					distance: this.distance,
					area_id: this.area_id,
					cate_id: this.cate_id,
					sub_cate_id: this.sub_cate_id,
					quality: this.quality,
					longitude: this.data.longitude,
					latitude: this.data.latitude,
					page: this.page,
					limit: this.limit,
				}).then(res => {
					this.loadStatus = "more";
					this.searchResult.push.apply(this.searchResult, res.data.data);
					if (res.data.data.length < this.limit) this.loadStatus = "noMore"; //判断所有数据是否加载完成；
					this.page = this.page + 1;
					if (res.data.data.length == 0) {
						this.contentText.contentnomore = '暂无数据'
					}
				})
			},
			goDetail(id) {
				uni.navigateTo({
					url: "/pages/index/detail?id=" + id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		.header {
			background-color: #fff;
			height: calc(44px + 96rpx);
			position: sticky;
			top: 0;
			width: 100%;
			z-index: 9999;
		}

		.uni-searchbox {
			width: 100%;
			padding: 30rpx 30rpx 30rpx 30rpx;
			// padding: 30rpx 0;
			box-sizing: border-box;
			background: white;
			display: flex;
			align-items: center;
			position: relative;
			z-index: 99999;

			.uni-search-input {
				flex: 1;
				margin-right: 40rpx;
				height: 66rpx;
				border-radius: 35rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
				background: #f2f2f2;
				display: flex;
				align-items: center;
				flex-wrap: nowrap;

				.uni-input {
					flex: 1;
					color: #333;
					padding: 0 16rpx;
					font-size: 28rpx;
				}

				.uni-input-plholder {
					font-size: 28rpx;
					color: #b2b2b2;
				}
			}

			.areaAddress {
				max-width: 150rpx;
				font-size: 30rpx;
			}
		}

		.search__results {
			position: relative;
			z-index: 9;

			.item {
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #f5f5f5;
				padding: 30rpx 0;

				image {
					width: 200rpx;
					height: 200rpx;
					// background-color: $theme-color;
					border-radius: 8rpx;
				}

				.infoBox {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					width: 450rpx;

					.title {
						position: relative;
						display: flex;
						justify-content: space-between;

						.title__name {
							letter-spacing: 0.5rpx;
							font-weight: bold;
							color: rgba(51, 51, 51, 1);
							font-size: 30rpx;
							// width: 450rpx;
							width: 72%;
							height: 40rpx;
							line-height: 40rpx;
							overflow: hidden;
							display: block;
							white-space: nowrap;
							text-overflow: ellipsis;

							image {
								width: 26rpx;
								height: 30rpx;
								margin-left: 10rpx;
							}
						}

						.title__distance {
							color: #999999;
							font-size: 24rpx;
							position: absolute;
							right: 0;
							top: 0;

							image {
								width: 14rpx;
								height: 20rpx;
								margin-right: 3rpx;
							}
						}
					}

					.info__rate {
						.rate {
							margin-right: 30rpx;
						}

						text {
							font-size: 24rpx;
							font-weight: 400;
							color: rgba(51, 51, 51, 1);
						}
					}

					.info__type {
						font-size: 22rpx;
						font-weight: 400;
						color: rgba(153, 153, 153, 1);
					}

					.info__label {
						.label_item {
							display: inline-block;
							background: rgba(230, 84, 49, 1);
							border-radius: 4rpx;
							padding: 4rpx 6rpx;
							color: #FFFFFF;
							font-size: 20rpx;
						}
					}

					.info {
						display: flex;
						justify-content: space-between;
						font-size: 20rpx;

						.left {
							color: #999;

							text:nth-of-type(1) {
								margin-right: 20rpx;
							}
						}

						.right {
							font-size: 26rpx;
							color: $theme-color;
						}
					}

					.detail {
						font-size: 24upx;
						color: #333;
						display: flex;
						justify-content: space-between;

						text:nth-of-type(1) {
							width: 320rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}

						text:nth-of-type(2) {
							color: #999;
						}
					}
				}
			}
		}

		.uni-header-screen {
			width: 100%;
			box-sizing: border-box;
			background: #fff;
			position: fixed;
			z-index: 1000;
		}

		.uni-screen-top,
		.uni-screen-bottom {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			color: #333;
		}

		.uni-screen-top {
			height: 88rpx;
			position: relative;
			background: #fff;
		}

		.uni-top-item {
			height: 28rpx;
			line-height: 28rpx;
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.uni-topitem-active {
			color: #e41f19;
		}

		.uni-screen-bottom {
			height: 100rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			font-size: 24rpx;
			align-items: center;
			overflow: hidden;
		}

		.uni-bottom-text {
			line-height: 26rpx;
			max-width: 82%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.uni-bottom-item {
			flex: 1;
			width: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 12rpx;
			box-sizing: border-box;
			background-color: #f7f7f7;
			margin-right: 20rpx;
			white-space: nowrap;
			height: 60rpx;
			border-radius: 40rpx;
		}

		.uni-bottom-item:last-child {
			margin-right: 0;
		}

		.uni-btmItem-active {
			background-color: #fcedea !important;
			color: #e41f19;
			font-weight: bold;
			position: relative;
		}

		.uni-btmItem-active::after {
			content: '';
			position: absolute;
			border: 1rpx solid #e41f19;
			width: 100%;
			height: 100%;
			border-radius: 40rpx;
			left: 0;
			top: 0;
		}

		.uni-btmItem-tap {
			position: relative;
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
		}

		.uni-btmItem-tap::after {
			content: '';
			position: absolute;
			width: 100%;
			height: 22rpx;
			background: #f7f7f7;
			left: 0;
			top: 58rpx;
		}

		.uni-bold {
			font-weight: bold;
		}

		.uni-active {
			color: #e41f19;
		}

		.uni-addr-left {
			padding-left: 6rpx;
		}

		.uni-seizeaseat-20 {
			height: 20rpx;
		}

		.uni-seizeaseat-30 {
			height: 30rpx;
		}

		/*顶部下拉选择 综合*/

		.uni-dropdownlist {
			width: 100%;
			position: absolute;
			background-color: #fff;
			border-bottom-left-radius: 24rpx;
			border-bottom-right-radius: 24rpx;
			overflow: hidden;
			box-sizing: border-box;
			padding-top: 10rpx;
			padding-bottom: 26rpx;
			left: 0;
			top: 88rpx;
			visibility: hidden;
			transition: all 0.2s ease-in-out;
			z-index: 999;
		}

		.uni-dropdownlist-show {
			visibility: visible;
		}

		.uni-dropdownlist-mask {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.6);
			//#ifndef H5
			z-index: -1;
			//#endif
			transition: all 0.2s ease-in-out;
			opacity: 0;
			visibility: hidden;
		}

		.uni-mask-show {
			opacity: 1;
			visibility: visible;
		}

		.uni-dropdownlist-item {
			color: #333;
			height: 70rpx;
			font-size: 28rpx;
			padding: 0 40rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		/*顶部下拉选择 综合*/
		.uni-screen-bottom {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			color: #333;
		}

		/*顶部下拉选择 属性*/

		.uni-scroll-box {
			width: 100%;
			height: 480rpx;
			box-sizing: border-box;
			position: relative;
			z-index: 99;
			color: #fff;
			font-size: 30rpx;
			word-break: break-all;
		}

		.uni-drop-item {
			color: #333;
			height: 80rpx;
			font-size: 28rpx;
			padding: 20rpx 40rpx 20rpx 40rpx;
			box-sizing: border-box;
			display: inline-block;
			width: 50%;
		}

		.uni-drop-btnbox {
			width: 100%;
			height: 100rpx;
			position: absolute;
			left: 0;
			bottom: 0;
			box-sizing: border-box;
			display: flex;
		}

		.uni-drop-btn {
			width: 50%;
			font-size: 32rpx;
			text-align: center;
			height: 100rpx;
			line-height: 100rpx;
			border: 0;
		}

		.uni-btn-red {
			background: #e41f19;
			color: #fff;
		}

		.uni-red-hover {
			background: #c51a15 !important;
			color: #e5e5e5;
		}

		.uni-btn-white {
			background: #fff;
			color: #333;
		}

		.uni-white-hover {
			background: #e5e5e5;
			color: #2e2e2e;
		}

		/*顶部下拉选择 属性*/
	}
</style>
